<template>
  <div>
    <el-form ref="pram" :model="pram" :rules="rules" label-width="120px" @submit.native.prevent>
      <el-form-item label="名称" prop="name">
        <el-input v-model="pram.name" maxlength="150" placeholder="名称" />
      </el-form-item>
      <el-form-item label="责任人" prop="personName">
        <el-input v-model="pram.personName" maxlength="150" placeholder="责任人" />
      </el-form-item>
      <el-form-item label="监督人" prop="supervisor">
        <el-input v-model="pram.supervisor" maxlength="150" placeholder="监督人" />
      </el-form-item>
      <el-form-item label="所属单位" prop="department">
        <el-cascader v-model="pram.department" :disabled="pram.departmentId ===0" :options="parentOptions" :props="categoryProps" style="width:100%" />
        <!-- allTreeList or parentOptions-->
      </el-form-item>
      <el-form-item label="提醒时间(天)" prop="warnTime">
        <el-input v-model.number="pram.warnTime" maxlength="3" placeholder="提醒时间（天）"></el-input>
      </el-form-item>
      <el-form-item label="进度条：" prop="progressRequirements">
        <el-select v-model="pram.progressRequirements" placeholder="请选择" class="selWidth">
          <el-option :value="item.name" v-for="(item, index) in progressRequirementsList" :key="index"
                     :label="item.name"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="要求时间" prop="taskTime">
        <el-date-picker v-model="pram.taskTime" :picker-options="{disabledDate:(time)=>time.getTime() < new Date().setHours(0,0,0,0)}" value-format="yyyy-MM-dd" format="yyyy-MM-dd" size="small" type="date" placement="bottom-end" style="width: 100%;" @change="onchangeTime" placeholder="进度要求"/>
      </el-form-item>
      <el-form-item label="任务进度" prop="progress">
        <el-input v-model="pram.progress" type="textarea" :rows="5" placeholder="进展情况" />
      </el-form-item>
      <el-form-item label="序号">
        <el-input-number v-model="pram.number" :min="0"/>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handlerSubmit('pram')" v-hasPermi="['admin:task:update','admin:task:save']">{{ isCreate===0?'确定':'更新' }}</el-button>
        <el-button @click="close">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import * as roleApi from '@/api/role.js'
import * as taskApi from '@/api/task.js'
import {Debounce} from '@/utils/validate'
export default {
  // name: "edit"
  components: { },
  props: {
    isCreate: {
      type: Number,
      required: true
    },
    editData: {
      type: Object,
      default: () => {
        return { rules: [] }
      }
    },
    allTreeList: {
      type: Array
    },
    allCategoryData:{
      type: Object
    },
  },
  data() {
    /*const validatePhone = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('请填写手机号'));
      } else if (!/^1[3456789]\d{9}$/.test(value)) {
        callback(new Error('手机号格式不正确!'));
      } else {
        callback();
      }
    };*/
    return {
      constants:this.$constants,
      pram: {
        name: null,
        departmentId: null,
        personName: null,
        supervisor: null,
        warnTime: 3,
        taskTime: null,
        progressRequirements: null,
        progress: null,
        number: 0,
        department:[],
        id: 0,
      },
      rules: {
        name: [{ required: true, message: '请填名称', trigger: ['blur', 'change'] }],
        departmentId: [{ required: true, message: '请选择所属单位', trigger: ['blur', 'change'] }],
        department: [{ required: true, message: '请选择所属单位', trigger: ['blur', 'change'] }],
        progressRequirements: [{ required: true, message: '请选择进度', trigger: ['blur', 'change'] }],
        personName: [ { required: true, message: '请填责任人', trigger: ['blur', 'change']} ],
        supervisor: [ { required: true, message: '请填监督人', trigger: ['blur', 'change']} ],
        warnTime: [{ required: true, message: '请填写提醒时间（天）', trigger: ['blur', 'change'] }],
        taskTime: [{ required: true, message: '请选择进度要求', trigger: ['blur', 'change'] }],
        progress: [ { required: true, message: '请填进展情况', trigger: ['blur']} ],
      },
      categoryData:{
        modelTypeList:[],
        personList:[]
      },
      parentOptions: [],
      categoryProps: {
        value: 'id',
        label: 'name',
        children: 'child',
        expandTrigger: 'hover',
        checkStrictly: true,
        emitPath: false,
        multiple:true
      },
      progressRequirementsList:[{name:'编制节点'},{name:'研讨节点'},{name:'审查节点'},{name:'上报节点'}]
    }
  },
  mounted() {
    this.initEditData()
  },
  methods: {
    close() {
      this.$emit('hideEditDialog')
    },
    onchangeTime(e){
      this.pram.taskTime = e
    },
    initEditData() {
      this.categoryData = this.allCategoryData
      this.parentOptions = [...this.allTreeList]
      this.addTreeListLabelForCasCard(this.parentOptions, 'child')

      if (this.isCreate !== 1) return //编辑
      const { name, departmentId,department, taskTime, progress, personName,warnTime,supervisor, id,progressRequirements ,number} = this.editData //通过list中slot-scope=“scope“，scope.$index就是该行的下标，scope.row就是该行的数据所有消息对象，有了这两个参数就可以实现编辑、删除功能（this.editData就是scope.row传入的对象参数）
      this.pram.name = name
      this.pram.progressRequirements = progressRequirements
      this.pram.departmentId = departmentId
      this.pram.department = department
      this.pram.taskTime = taskTime
      this.pram.progress = progress
      this.pram.personName = personName
      this.pram.warnTime = warnTime
      this.pram.supervisor = supervisor
      this.pram.id = id
      this.pram.number = number
    },
    addTreeListLabelForCasCard(arr, child) {
      arr.forEach((o,i) => {
        if (o.child && o.child.length) {
          o.disabled = true
          o.child.forEach((j) => {
            //j.disabled = true
          })
        }
      })
    },
    handlerSubmit:Debounce(function(form) {
      this.$refs[form].validate(valid => {
        if (!valid) return
        console.log(this.pram.department)
        if (this.pram.department.length>0){
          this.pram.departmentId=this.pram.department.toString()
        }
        if (this.isCreate === 0) {
          this.handlerSave()
        } else {
          this.handlerEdit()
        }
      })
    }),
    handlerSave() {
      taskApi.typeAdd(this.pram).then(data => {
        this.$message.success('创建成功')
        this.$emit('hideEditDialog')
      })
    },
    handlerEdit() {
      taskApi.typeAdd(this.pram).then(data => {
        this.$message.success('更新成功')
        this.$emit('hideEditDialog')
      })
    },
  }
}
</script>

<style scoped>

</style>
